<template>
  <div className="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData"
                 :count01="countList.count01"
                 :count-t0="countList.countT0"
                 :count-s0="countList.countS0"
                 :count05="countList.count05"
                 :count10="countList.count10"
                 :count15="countList.count15"
                 :count20="countList.count20"
                 :count25="countList.count25"
    />

    <!--折线图-->
    <el-row style="background:#fff; padding:16px 16px 0; margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

        <el-row :gutter="32" style="display: flex;justify-content: space-around">
          <!--雷达图-->
<!--          <el-col :xs="24" :sm="24" :lg="8">-->
<!--            <div class="chart-wrapper">-->
<!--              <raddar-chart />-->
<!--            </div>-->
<!--          </el-col>-->
          <!--饼状图-->
          <el-col :xs="24" :sm="24" :lg="8">
            <div class="chart-wrapper">
              <pie-chart />
            </div>
          </el-col>
          <!--条形图-->
          <el-col :xs="24" :sm="24" :lg="8">
            <div class="chart-wrapper">
              <bar-chart />
            </div>
          </el-col>
        </el-row>
  </div>
</template>

<script>
// import {
//   getConfigInfo,
//   getIndexLinechartData,
//   getIndexLinechartDataByMonth,
//   getIndexSelectBoxCount01,
//   getIndexSelectBoxCount05,
//   getIndexSelectBoxCount10,
//   getIndexSelectBoxCount15,
//   getIndexSelectBoxCount20,
//   getIndexSelectBoxCount25,
//   getIndexSelectBoxCountS0,
//   getIndexSelectBoxCountT0
// } from "@/api/index";
// 面板组
import PanelGroup from './dashboard/PanelGroup'
// 折线图
import LineChart from './dashboard/LineChart'
// 雷达图
import RaddarChart from './dashboard/RaddarChart'
// 饼状图
import PieChart from './dashboard/PieChart'
// 条形图
import BarChart from './dashboard/BarChart'

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      /** 当前配置信息，这里是存放获取的租户管理员配置的展示信息 */
      config: {},
      /** 面板组，该用户配置的计数列表，这里你显示什么需要先定义 */
      countList: {
        count01: null,
        countT0: null,
        countS0: null,
        count05: null,
        count10: null,
        count15: null,
        count20: null,
        count25: null,
      },
      // 该用户选择的面板组（数组）
      selected: null,

      /** 折线图 */
      lineChartData: {
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130],
        dateData: ["1", "2", "3", "4", "5", "6", "7"]
      },

    }
  },
  created() {
    /** 2022-5-31,初始化租户参数 */
    this.configInfo();
  },
  methods: {
    /** 2022-5-27，获取接口参数信息，这里是配置的，我做了管理员选项，让每个租户管理自己选要展示的框 */
    configInfo(){
      getConfigInfo().then(response => {
        this.config = response.data;
        this.selected = this.config.selectBoxCount.split(",");
        /** 2022-5-31，获取面板组框：获取该租户设置了展示哪几个计数框 */
        this.check(this.selected);

        /** 2022-5-31,获取折线图数据 */
        this.getLinechardData();
      });
    },
    /** 判断当前选中了那些，注：这是面板组的，getIndexSelectBoxCount01-xx，这些方法是每个框各自获取自己的框的数据，因为是配置的，就分别获取的 */
    check(selected) {
      for (const s of selected) {
        switch (s) {
          case "01":
            getIndexSelectBoxCount01().then(response => {
              this.countList.count01 = parseInt(response.data);
            });
            break;
          case "S0":
            getIndexSelectBoxCountS0().then(response => {
              this.countList.countT0 = parseInt(response.data);
            });
            break;
          case "T0":
            getIndexSelectBoxCountT0().then(response => {
              this.countList.countS0 = parseInt(response.data);
            });
            break;
          case "05":
            getIndexSelectBoxCount05().then(response => {
              this.countList.count05 = parseInt(response.data);
            });
            break;
          case "10":
            getIndexSelectBoxCount10().then(response => {
              this.countList.count10 = parseInt(response.data)
            });
            break;
          case "15":
            getIndexSelectBoxCount15().then(response => {
              this.countList.count15 = parseInt(response.data);
            });
            break;
          case "20":
            getIndexSelectBoxCount20().then(response => {
              this.countList.count20 = parseInt(response.data);
            });
            break;
          case "25":
            getIndexSelectBoxCount25().then(response => {
              this.countList.count25 = parseInt(response.data);
            });
            break;
        }
      }
    },
    /** 获取折线图的数据，这里也是管理员可配置，所以用到了判断 */
    getLinechardData() {
      getIndexLinechartDataByMonth(this.config.selectLine).then(response => {
        this.lineChartData = response.data;
        // 当前租户设置中选择展示的折线图（1：第一种，2：第二种）
        if (this.config.selectLine === '1') {
          this.lineChartData.selectName = ['发票数','核销数']
        } else {
          this.lineChartData.selectName = ['发票数','转出数']
        }
      })
    },

    // 调用变化线型图，给4个数据卡片调用的，卡片调用的时候就加载卡片传过来的数据
    handleSetLineChartData(type) {
      // 根据子集的调用切换对应的数据
      // this.lineChartData = lineChartData[type]
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>

